<!-- 合成藏品详情页 -->
<template>
	<view>
    <navbar></navbar>
	
	
		<view class="title"></view>
		<view class="container" v-if="detail.goods_id">
			
			<!-- 弹窗 -->
			<uni-popup ref="popup" type="center" :is-mask-click="false">
				<view class="popup-list">
					<!-- <view class="close dy-iconfont icon-guanbi f-40" 
						@tap.stop.prevent="close"></view> -->
						<view class="close">
							<text>{{goodsItem.goods_name}}</text>
							<text class="dy-iconfont icon-guanbi f-w btn" @click="close"></text>
						</view>
						<scroll-view scroll-y="true" class="popup-scroll" @scrolltolower='getCollectionList' @scroll="onScroll">
							<view class="assets-warp">
								<view class="assets" v-for="(item,index) in popupList" :key="item.order_id"  @tap.stop.prevent="choseGoods(item.order_id)">
									<!-- <view class="dy-iconfont icon-xuanzhongjiaobiao f-40 xuanzhong"
										v-show="choseList[choseIndex] != undefined && choseList[choseIndex].indexOf(item.order_id) >= 0"></view> -->
									<view class="assets-checked" text="已选择" v-show="choseList[choseIndex] != undefined && choseList[choseIndex].indexOf(item.order_id) >= 0">已选择</view>
									<!-- <tag text="已选择" v-show="choseList[choseIndex] != undefined && choseList[choseIndex].indexOf(item.order_id) >= 0"></tag> -->
									<view class="goods__img-wrapper">
										<easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
											:image-src="item.goods_image" borderRadius="16rpx"></easy-loadimage>
									</view>
									<view class="assets-info">
										<view class="assets__name f-28  col-f">{{ item.goods_name }}</view>
										<view class="assets__sort-no">
											<view class="global-limit col-0">
												编号:
											</view>
											<view class="global-limit-count">
												{{ item.sort_no }}/{{ item.total_num }}
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</scroll-view>
					<view type="default" class="popup-btn"
						@tap.stop.prevent="chose">确定({{sumTotal}} / {{goodsItem.need_share_id_num}} ) </view>
				</view>
			</uni-popup>
			<view class="container-info">
				<view class="media-box">
					<swiper autoplay @change="setCurrent" class="swiper" :duration="duration" :interval="interval"
						:circular="true">
						<swiper-item @tap.stop.prevent="onPreviewImages" :data-index="index"
							v-for="(item, index) in detail.image" :key="index">
							<image class="slide-image" mode="aspectFill" :src="item.file_path"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="info-title">
					【{{ detail.goods_name }}】 合成
				</view>
			</view>
			<view class="container-title">
				<view class="container-title-div"></view>
				合成材料
			</view>
			<view class="collection-list">
					<view class="collection-item" v-for="(item,index) in collectionList" :key="index" @tap.stop.prevent="getCollectionDetail(item,index)">
						<view class="assets-checked" text="已选择" v-show="choseList[index].length==item.need_share_id_num">已选择</view>
						<view class="cover">
							<image class="cover-image" mode="aspectFill" :src="item.file_path"></image>
						</view>
						<view class="text-warp">
							<view class="list-name" :title="item.goods_name">
								{{item.goods_name.length>4?(item.goods_name.substr(0,5)+'...') : item.goods_name}}
							</view>
							<view class="list-number textStyle">
								合成数量：{{item.need_share_id_num}}
							</view>
							
							<view class="list-number">
								已选择：{{choseList[index].length}}
							</view>
						</view>
					</view>
			</view>
			
			<view class="container-title" v-if="article_nft_intro" >
				<view class="container-title-div"></view>
				活动介绍
			</view>
			<view class="container-activity" v-if="article_nft_intro" >
				<mp-html :content="article_nft_intro"></mp-html>
			</view>
			
			
			
			
			<!-- 合成弹窗 -->
			<view v-show="showComposeMask" class="compose-mask">
				<view class="compose-container" :class="{'animate':showComposeAnimate}">
					<view class="btn-compose" @tap.stop.prevent="compose">立即<br />合成</view>
					<!-- <view class="compose-tips">合成碎片，开终极藏品</view> -->
					<view class="compose-colection-list">
						<view class="compose-colection-item" v-for="(item,index) in collectionList" :key="index"
							:style="{left:(collectionPos[index]['x'] +'rpx'),top:(collectionPos[index]['y'] +'rpx'),transform:'rotate(45deg)'}">
							<!-- 碎片藏品封面 -->
							<view class="compose-colection-cover">
								<image class="cover-image" mode="aspectFill" :src="item.file_path"
									:style="{'-webkit-transform':'rotate(-45deg)',transform:'rotate(-45deg)'}"></image>
							</view>
			
						</view>
					</view>
					<!-- 箭头 -->
					<view class="arrow-list">
						<view class="arrow-item" v-for="(item,index) in collectionList" :key="index"
							:style="{left:(collectionArrowPos[index]['x'] +'rpx'),top:(collectionArrowPos[index]['y'] +'rpx'),transform:'rotate('+ collectionArrowPos[index]['d'] +'deg)'}">
						</view>
					</view>
					<!-- 合成结果 -->
					<view class="compose-result">
						<view v-if="result.order_id" class="compose-result-content">
							<view class="compose-result-cover">
								<image class="cover-image" mode="aspectFill" :src="result.file_path"></image>
							</view>
							<view class="compose-result-btn" @tap.stop.prevent="goComposeCollectionDetail(result)">立即查看
							</view>
						</view>
						<view class="compose-result-bg"></view>
					</view>
				</view>
			</view>
			
			<!-- 底部操作栏 -->
			<bottom-placeholder></bottom-placeholder>
			<view v-if="detail.active_status == 1 && !hasOverLimit" class="footer-fixed">
				<button class="btn-normal btn-compose"
					:class="{'disabled':!btnCompose}"
					:disabled="!btnCompose"
					@tap.stop.prevent="showComposeMask = true">立即合成</button>
				<!-- <view class="compose-progress">
					当前合成进度 ：{{buyCollectionNum}}/{{collectionListLen}}
				</view> -->
			</view>
			<view v-else-if="detail.active_status == 1 && hasOverLimit" class="footer-fixed">
				<button class="btn-normal btn-compose disabled" disabled>您已达到限量份数</button>
			</view>
			<view v-else-if="detail.active_status == 2" class="footer-fixed">
				<button class="btn-normal btn-compose disabled" disabled>活动开始时间 ：{{detail.sku_start_date_time}}</button>
			</view>
			<view v-else-if="detail.active_status == 3" class="footer-fixed">
				<button class="btn-normal btn-compose disabled" disabled>活动结束时间 ：{{detail.sku_end_date_time}}</button>
			</view>
			<view v-else-if="detail.active_status == 4" class="footer-fixed">
				<button class="btn-normal btn-compose disabled" disabled>活动已结束</button>
				<!-- <view class="compose-progress">
					活动已结束
				</view> -->
			</view>
			
			
	   </view>
	</view>
</template>

<script>
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	import tag from '@/components/tag/index'
	import navbar from "@/components/navbar/navbar";
	import actionSharePoster from '@/components/poster/actionSharePoster';
	import bottomPlaceholder from '@/components/bottom-placeholder/index';
  import { isWeixin } from '../../utils/verify';
	const app = getApp();

	let goodsSpecArr = [];
	export default {
		components: {
			tag,
			navbar,
			actionSharePoster,
			bottomPlaceholder
		},
		data() {
			return {
				scrollTop: 0,
				easyLoadimage: {
					scrollTop: 50
				},
				goodsCount: 0,
				goodsItem: {}, //每次点击狂重置item 用于选择goods_id 22,11
				page: 1,
				total: 0,
				choseIndex: -1,
				composeList: [], //合成列表
				choseList: [], //选中列表
				popupList: [], //藏品列表
				hasOverLimit: false,

				composeLoading: false, //合成中


				interval: 3000,

				// 自动切换时间间隔
				duration: 800,

				// 滑动动画时长
				currentIndex: 1,

				// 轮播图指针
				showView: true,

				// 显示商品合成碎片
				collectionList: [],

				//合成所需碎片数量
				collectionListLen: 0,

				//已购买的碎片数
				buyCollectionNum: 0,

				//合成弹窗
				showComposeMask: false,

				//碎片藏品分布在圆周上的坐标
				collectionPos: [],

				//碎片藏品箭头坐标
				collectionArrowPos: [],

				//合成藏品信息
				result: {},
				// 商品id
				goods_id: '',
				detail: {
					goods_id: "",
					active_status: 0,
					image: [],
					goods_name: "",
					second_goods_name: "",
					publisher_name: "",
					author: "",
					goods_create_time: "",
					rules: "",
					active_status: 0,
					num_per_day: ''
				},
				article_nft_intro: '',
				article_rules: '',
				showComposeAnimate: false,
			}

		},
		// onPageScroll(e) {
		// 	console.log(e)
		// 	this.scrollTop = e.scrollTop;
		// },
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(e) {
			let _this = this;

			let scene = app.getSceneData(e);; // 商品id

			if (e.goods_id) {
				_this.goods_id = e.goods_id;
			} else {
				_this.goods_id = scene.gid;
			}
			// 初始化信息
			_this.initData();

			// 获取商品信息
			_this.getGoodsDetail();
			// TODO: delete
			// _this.goods_id = 43;
		},
		onShow(e) {
			
			// 屏蔽解决切换页面按钮禁用
			// // 初始化信息
			// this.initData();
			this.showComposeMask = false;
			this.showComposeAnimate = false;
			// this.result = {};
			this.buyCollectionNum = 0;
			// // 获取商品信息
			// this.getGoodsDetail();
		},
		onPullDownRefresh(e) {
			this.getGoodsDetail(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			let _this = this; // 构建页面参数

			let params = app.getShareUrlParams({
				'goods_id': _this.goods_id
			});
			return {
				title: _this.detail.goods_name,
				path: "/pages/goods/index?" + params
			};
		},
		computed:{
			sumTotal(){
				if(this.choseList[this.choseIndex] == undefined){
					return 0
				}else{
					return this.choseList[this.choseIndex].length
				}
				
			},
			btnCompose(){
				let count = 0
				// 统计用户共选择几个碎片
				for(let i = 0;i<this.collectionList.length;i++){
					count = count + this.choseList[i].length
				}
				return this.goodsCount === count?true:false
			}
		},
		methods: {
			onScroll(e) {
				// console.log(e)
				this.scrollTop = e.detail.scrollTop;
			},
			// 回退初始化信息
			initData() {
				this.showComposeMask = false;
				this.showComposeAnimate = false;
				this.result = {};
				this.buyCollectionNum = 0;
			},

			/**
			 * 立即合成
			 */
			compose() {
				let _this = this
				uni.showLoading();
				// console.log(this.collectionList.length)
				for(let i = 0;i<this.collectionList.length;i++){
					this.composeList = this.composeList.concat(this.choseList[i])
				}
				// console.log(this.composeList.join(','))
				let composeOrderIds = this.composeList.join(',')
				if (this.composeLoading) {
					return;
				}

				this.composeLoading = true;

				app._post_form(
					// 'user.order/doComposeShareIds', {
					'user.order/doComposeShare', {
						order_id: composeOrderIds,
						goods_id:this.goods_id
					},
					(result) => {
						this.result = {
							order_id: result.data.order_id,
							goods_name: this.detail.goods_name,
							file_path: this.detail.image[0].file_path
						// console.log(result)
						}
						// 清空选择的藏品数组
						_this.collectionList = []
						// _this.composeList = []
						// composeOrderIds = []
						
						// 开始播放合成动画
						this.showComposeAnimate = true;
						
					},
					false,
					() => {
						uni.hideLoading();
						this.composeLoading = false;
						
						// 清空选择的藏品数组
						_this.composeList = []
						composeOrderIds = []
					}
				);
				
				composeOrderIds = []
			},
			/**
			 * 碎片藏品分布坐标
			 * @param {Number} r 圆半径
			 * @param {Number} sx 圆心x轴偏移量
			 * @param {Number} sy 圆心x轴偏移量
			 * @param {Number} sa 偏移的角度，用于调整点的分布位置
			 * @param {Number} count 分布点的数量
			 */
			getPoint(r, sx, sy, sa, count) {
				let point = [];
				let radians = (Math.PI / 180) * Math.round(360 / count);
				let initRadians = (Math.PI / 180) * sa; //偏移的弧度
				for (let i = 0; i < count; i++) {
					let x = sx + r * Math.sin(radians * i + initRadians),
						y = sy + r * Math.cos(radians * i + initRadians),
						d = -((360 / count) * i + sa) + 90;

					point.push({
						x: x,
						y: y,
						d: d
					});
				}
				return point;
			},
			// 打开弹窗
			open(){
				//出现page反复为1的bug，遂将其注释
				// this.page = 1
				app._get('page/detail', {
					goods_id: this.goods_id
				}, result => {
					// 初始化商品详情数据
					let data = this._initGoodsDetailData(result.data);
					this.setData(data);
				}, null, () => {
					// if (callback) {
					// 	callback();
					// }
				});
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			  },
			  // 关闭弹窗
			close() {
				this.page = 1
				this.popupList = []
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				
				// this.choseList[this.choseIndex] = []
				this.$refs.popup.close()
			},
			chose() {
				this.popupList = []
				this.page = 1
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			getCollectionList(){
				if(this.popupList.length < this.total){
					this.page++
					this.getCollectionDetail(this.goodsItem,this.choseIndex)
				}
			},
			// 展示藏品碎片列表
			getCollectionDetail(item,index) {
				this.goodsItem = item
				let _this = this
				// _this.popupList = []
				this.choseIndex = index
				// if (item.share_id_num >= 1) {
					
				// }else{
				// 	uni.showToast({
				// 		title: '您还未拥有该藏品',
				// 		icon: 'none'
				// 	})
				// }
				// let orderId = item.share_id_order_ids[0]; //暂且取第一个
				// 请求拥有当前碎片列表
				// let goodsId = item.goodsId
				let goods_id = item.goods_id
				uni.showLoading();
				app._get('goods/activityList', {
					goods_id:goods_id,
					page: _this.page
				}, (result) => {
					uni.hideLoading()
					if (1 == result.code) {
						let data = result.data.list.data;
						_this.popupList = _this.popupList.concat(data)
						_this.total = result.data.list.total
						// this.setData(data);
				
						// this.setData({
						//   isLogin: !!userInfo
						// });
						// uni.setStorageSync('userInfo',userInfo)
					}
				});
				this.open()
				// uni.navigateTo({
				// 	url: url
				// });
			},
			// 选择碎片
			choseGoods(order_id){
				let choseIndex = this.choseIndex
				let max = this.collectionList[choseIndex].need_share_id_num
				// 选择数量大于合成数量 如果超过最大选择数并且不再数组中
				if(this.choseList[choseIndex].length >= max && this.choseList[choseIndex].indexOf(order_id) < 0){
					uni.showToast({
						title: `最多可选${max}个`,
						icon: 'none'
					})
					return
				}
				// 如果不在数组中 选中
				if(this.choseList[choseIndex].indexOf(order_id) < 0){
					// this.choseList[choseIndex].push(order_id)
					var list=this.choseList[choseIndex]
					list.push(order_id)
					this.$set(this.choseList,choseIndex,list)
				}else{//在数组中取消选择-删除
					this.choseList[choseIndex].splice(this.choseList[choseIndex].indexOf(order_id),1)
				}
			},
			// 跳转合成藏品详情
			goComposeCollectionDetail(item) {
				// 清空选择的碎片
				this.composeList = []
				console.log(1111111111)
				console.log(this.composeList)
				uni.navigateTo({
					url: `/pages/user/assets/detail/detail?order_id=${item.order_id}`
				});
			},
			/**
			 * 获取藏品碎片 
			 */
			getComposeParts() {
				// app._get('user.order/getComposeShareIds', {
				app._get('user.order/getComposeShare', {
					goods_id: this.goods_id
					// goods_id: 151
				}, result => {
					let data = result.data;
					this.collectionList = data.share_id_list || [];
					let count = 0
					for(let i = 0;i< this.collectionList.length;i++){
						this.choseList.push([])
						this.goodsCount += this.collectionList[i].need_share_id_num*1
					}
					// console.log(this.choseList)
					//判断用户是否已经达到合成数量上限
					this.hasOverLimit = Number(data.has_compose_num) >= Number(data.num_per_user);

					//藏品碎片统计
					let collectionCount = this.collectionList.reduce((a, b) => {
						let shareIdNum = b.share_id_num;
						if (shareIdNum > b.need_share_id_num) {
							shareIdNum = b.need_share_id_num;
						}
						let buyNum = a.buyNum + shareIdNum;
						let needNum = a.needNum + b.need_share_id_num;
						return {
							needNum,
							buyNum
						};
					}, {
						needNum: 0,
						buyNum: 0
					})
					//已购买数量
					this.buyCollectionNum = collectionCount.buyNum;

					//合成需要的数量
					this.collectionListLen = collectionCount.needNum;
					
					//只有两个碎片的时候偏移90度，正好在X轴上
					let sa = this.collectionList.length == 2 ? 90 : 180

					// 碎片藏品在圆周上的坐标获取
					// this.collectionPos = this.getPoint(294, 0, 0, sa, this.collectionListLen);
					this.collectionPos = this.getPoint(294, 0, 0, sa, this.collectionList.length);

					// 碎片藏品箭头在圆周上的坐标获取
					this.collectionArrowPos = this.getPoint(184, 0, 0, sa, this.collectionListLen);
				}, null, null);
			},
			/**
			 * 获取商品信息 
			 */
			getGoodsDetail(callback) {

				app._get('page/detail', {
					goods_id: this.goods_id
				}, result => {
					// 初始化商品详情数据
					let data = this._initGoodsDetailData(result.data);
					this.setData(data);
				}, null, () => {
					if (callback) {
						callback();
					}
				});

				//获取碎片藏品
				this.getComposeParts();
			},

			/**
			 * 初始化商品详情数据
			 */
			_initGoodsDetailData(goodsDetail) {
				app.configJweixin({
					title: goodsDetail.goods_name,
					desc: '发现一款超赞的数字藏品，快来看看！',
					imgUrl: goodsDetail.goods_image
				});
				let _this = this;
				let data = {};;

				try {

					if (goodsDetail.rules && 0 < goodsDetail.rules.length) {
						_this.article_rules = _this.escape2Html(goodsDetail.rules);;
					}
					// 简介
					if (goodsDetail.nft_intro && 0 < goodsDetail.nft_intro.length) {
						_this.article_nft_intro = _this.escape2Html(goodsDetail.nft_intro);;
					}

				} catch (error) {
					console.log(error);
				}

				data.detail = goodsDetail;
				return data;
			},

			/**
			 * 设置轮播图当前指针 数字
			 */
			setCurrent(e) {
				let _this = this;

				_this.setData({
					currentIndex: e.detail.current + 1
				});
			},


			/**
			 * 浏览商品图片
			 */
			onPreviewImages(e) {
				let _this = this;

				let index = e.currentTarget.dataset.index;
				let imageUrls = [];

				_this.detail.image.forEach(item => {
					imageUrls.push(item.file_path);
				});

				uni.previewImage({
					current: imageUrls[index],
					urls: imageUrls
				});
			},

			// 刷新详情
			refreshGoodsDetail: function() {
				uni.showLoading();
				this.getGoodsDetail(() => {
					uni.hideLoading();
				});
			},
		}
	};
</script>
<style>
  page{
    background:#ffffff;
  }
</style>
<style lang="scss" scoped>
	.container{
		.container-info{
			margin: 0rpx;
			.media-box{
				.swiper{
					height: 644rpx;
					.slide-image{
						height: 644rpx;
					}
				}
					
			}
			
		}
		.container-warp{
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			margin-top: -88rpx;
			position: relative;
			.info-title{
				font-size: 30rpx;
				color: #202637;
				border-bottom: 8rpx solid #EEEFF0;
				margin: 0 32rpx;
				height: 124rpx;
				padding-top: 24rpx;
				
			}
		}
		.container-title{
			font-size: 32rpx;
			color: #202637;
			margin: 0 32rpx ;
			margin-top: 72rpx;
			// border-left: solid #D8B255 4rpx;
			// padding-left: 10rpx;
			display: flex;
			align-items: center;
			.container-title-div{
				width: 10rpx;
				height: 28rpx;
				border-left: solid #4474E3 4rpx;
			}
		}
	
		.collection-list{
			margin: 0 32rpx;
			margin-bottom: 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content:  flex-start;
			.collection-item{
				margin-top: 28rpx;
				margin-right: 18rpx;
				// background: url(@/static/homeimg/ysImg/itemImg.png);
				background-size: 100% 100%;
				position: relative;
				.text-warp{
					margin: 12rpx 8rpx;
					.list-name{
						font-size: 28rpx;
						color: #000;
					}
					.textStyle{
						margin: 10rpx 0rpx;
					}
					.list-number{
						font-size: 26rpx;
						color: #A8A8A8;
					}
				}
				
				.cover{
					width: 212rpx;
					height: 150rpx;
					overflow: hidden;
					.cover-image{
						width: 212rpx;
						height: 150rpx;
					}
				}
				
			}
		}
		.container-activity{
			margin: 0 32rpx;
			// background-color: #3E4042;
			// padding: 10rpx;
		}
	}
	
	/* 底部操作栏 */
	.footer-fixed {
		display: block;
		box-sizing: border-box;
		padding: 23rpx 0 36rpx;
		height: 155rpx;
		// background-color: #ffff;
		text-align: center;
	}
	
	.footer-fixed .btn-compose {
		width:698rpx;
		height: 96rpx;
		// background: $uni-bg-color-main-linear;
		background: linear-gradient(158deg, #79ACF3, #4474E3);
		border-radius: 22rpx;
		margin: 0 auto 14rpx;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 96rpx;
		text-align: center;
		cursor: pointer;
		color: #FFFFFF;
	}
	
	.footer-fixed .btn-compose.disabled {
		background: #cbcbcb;
		opacity: 0.5;
		color: #fffffe;
		cursor: default;
	}
	
	.footer-fixed .compose-progress {
		font-size: 22rpx;
		font-weight: 400;
		color: #767676;
	}
	
	
	
	.popup-list{
		display: flex;
		// align-items: center;
		justify-content: center;
		width: 582rpx;
		height: 948rpx;
		background-color: #fff ;
		border-radius: 10rpx;
		position: relative;
		z-index: 999;
		overflow: hidden;
	}
	.popup-scroll{
		margin-top: 100rpx;
		height: 800rpx;
		// padding:0 20rpx;
		.assets-warp{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 0 28rpx;
		}
	}
	.close{
		position: absolute;
		right: 0;
		left: 0;
		text-align: center;
		padding: 20rpx 30rpx;
		z-index: 999;
		
		font-size: 32rpx;
		color: #000;
		
		border-bottom: 2rpx solid #656565;
	}
	.close .btn{
		position: absolute;
		right: 20rpx;
		font-size: 48rpx;
	}
	.popup-btn{
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		position: absolute;
		bottom: 10rpx;
		background: linear-gradient(158deg, #79ACF3, #4474E3);
		color: #fff;
		text-align: center;
		border-radius: 20rpx;
		z-index: 999;
	}
	
	
	.assets-checked{
		position: absolute;
		right: 0;
		top: 0;
		width: 92rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9;
		font-size: 26rpx;
		font-weight: 400;
		color: #D8B255;
		text-align: center;
		line-height: 40rpx;
	}
	
	.assets {
		width: 248rpx;
		// background: url(@/static/homeimg/ysImg/itemImg.png);
		background-size: 100% 100%;
		margin-top: 30rpx;
		position: relative;
		box-shadow: 0rpx 0rpx 8rpx rgba(68, 116, 227, 0.3);
		.goods__img-wrapper{
			
			.goods__img{
				height: 152rpx;
				width: 248rpx;
			}
		}
		.assets-info{
			display: inline-block;
		}
		
	}
	.assets__name{
		margin: 12rpx;
	}
	.assets__sort-no{
		display: flex;
		margin-left: 12rpx;
		margin-bottom: 28rpx;
		background-color:#4474E3 ;
		padding: 4rpx;
		font-size: 22rpx;
		justify-content: space-between;
		.global-limit{
			color: #fff;
			margin: 5rpx 10rpx;
		}
		.global-limit-count{
			color: #4474E3;
			background-color:#E8EEFB ;
			padding: 5rpx 5rpx;
		}
	}
	
	
	// 合成弹窗样式
	.compose-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 999;
	}
	
	.compose-container {
		width: 587rpx;
		height: 587rpx;
		// border: 6rpx solid rgba(254, 213, 139, .37);
		// border-radius: 50%;
	}
	
	.compose-container .btn-compose {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -90rpx;
		margin-top: -90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 180rpx;
		background: linear-gradient(158deg, #79ACF3, #4474E3);
		border-radius: 5%;
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
		line-height: 52rpx;
		letter-spacing: 10rpx;
		/* z-index: 1; */
	}
	
	.compose-container .btn-compose::after {
		position: absolute;
		top: -11rpx;
		left: -11rpx;
		content: '';
		width: 198rpx;
		height: 198rpx;
		// border: 1px solid rgba(254, 213, 139, .5);
		// border-radius: 50%;
	}
	
	.compose-colection-list,
	.arrow-list,
	.compose-tips {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -57rpx;
		margin-left: -57rpx;
	}
	
	.compose-tips {
		margin-left: -158rpx;
		margin-top: -195rpx;
		width: 317rpx;
		height: 51rpx;
		background: #FFFFFF;
		border-radius: 5px;
		font-size: 26rpx;
		font-weight: 400;
		color: #221D3E;
		line-height: 51rpx;
		text-align: center;
		-webkit-animation: composeTips 1s ease-out alternate-reverse infinite;
		-moz-animation: composeTips 1s ease-out alternate-reverse infinite;
		animation: composeTips 1s ease-out alternate-reverse infinite;
		z-index: 1;
	}
	
	.compose-tips:after {
		position: absolute;
		left: 50%;
		margin-left: -10rpx;
		bottom: -26rpx;
		display: block;
		content: '';
		height: 0;
		width: 0;
		border-width: 14rpx 10rpx;
		border-color: rgba(0, 0, 0, 0);
		border-top-color: #fff;
		border-style: solid;
	}
	
	.arrow-list {
		margin-top: -29.5rpx;
		margin-left: -24.5rpx;
	}
	
	.compose-container.animate {
		border: none;
	}
	
	.compose-container.animate .compose-tips {
		display: none;
	}
	
	.compose-container.animate .btn-compose {
		opacity: 0;
		-webkit-transform: rotate(180deg) scale(0);
		-moz-transform: rotate(180deg) scale(0);
		-ms-transform: rotate(180deg) scale(0);
		-o-transform: rotate(180deg) scale(0);
		transform: rotate(180deg) scale(0);
		-webkit-transition: transform 1s, opacity .5s;
		-moz-transition: transform 1s, opacity .5s;
		-ms-transition: transform 1s, opacity .5s;
		-o-transition: transform 1s, opacity .5s;
		transition: transform 1s, opacity .5s;
	}
	
	.compose-container.animate .compose-colection-list,
	.compose-container.animate .arrow-list {
		opacity: 0;
		-webkit-transform-origin: 57rpx 57rpx;
		-moz-transform-origin: 57rpx 57rpx;
		-ms-transform-origin: 57rpx 57rpx;
		-o-transform-origin: 57rpx 57rpx;
		transform-origin: 57rpx 57rpx;
		-webkit-transform: rotate(360deg) scale(0);
		-moz-transform: rotate(360deg) scale(0);
		-ms-transform: rotate(360deg) scale(0);
		-o-transform: rotate(360deg) scale(0);
		transform: rotate(360deg) scale(0);
		-webkit-transition: ease-in transform 1s, ease-in opacity .5s;
		-moz-transition: ease-in transform 1s, ease-in opacity .5s;
		-ms-transition: ease-in transform 1s, ease-in opacity .5s;
		-o-transition: ease-in transform 1s, ease-in opacity .5s;
		transition: ease-in transform 1s, ease-in opacity .5s;
	}
	
	.arrow-list {
		margin-top: -25rpx;
		margin-left: -30rpx;
	}
	
	.arrow {
		position: absolute;
		left: 0;
		top: 0;
		margin-top: -25rpx;
		margin-left: -30rpx;
	
	}
	
	.compose-colection-item,
	.arrow-item {
		position: absolute;
		left: 0;
		top: 0;
	
	}
	
	.compose-colection-item {
		border: 2rpx solid #e8cd8a;
		background: #e8cd8a;
	}
	
	.arrow-item {
		width: 59rpx;
		height: 49rpx;
		// background: url(https://imgcdn.ecbao.cn/nft/arrow.png) no-repeat;
		background-size: 59rpx 49rpx;
	}
	
	.compose-colection-item .compose-colection-cover {
		position: relative;
		width: 114rpx;
		height: 114rpx;
		overflow: hidden;
	}
	
	
	.compose-colection-item image {
		position: absolute;
		left: -24rpx;
		top: -24rpx;
		width: 162rpx;
		height: 162rpx;
	}
	
	
	// 合成成功样式
	.compose-result {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.compose-result-bg {
		display: none;
		position: absolute;
		top: 0;
		left: -25%;
		width: 150%;
		height: 100%;
		background: url(https://imgcdn.ecbao.cn/nft/light-bg.png) center no-repeat;
		background-size: 100% auto;
		z-index: -1;
	}
	
	.compose-result-content {
		display: none;
	}
	
	.compose-result-cover {
		position: relative;
		margin: 0 auto;
		width: 450rpx;
		height: 595rpx;
		background: #F9F9F9;
		border-radius: 16rpx;
	
	}
	
	.compose-result-cover::after {
		position: absolute;
		left: -14rpx;
		top: -14rpx;
		content: '';
		width: 474rpx;
		height: 618rpx;
		background: #151515;
		border: 2rpx solid #5B5F68;
		border-radius: 16rpx;
		z-index: 0;
		box-shadow: 0 0 222rpx 38rpx rgba(255, 255, 255, .3);
	}
	
	.compose-result-cover image {
		width: 450rpx;
		height: 595rpx;
		z-index: 1;
	}
	
	.compose-result-btn {
		margin: 126rpx auto 0;
		width: 475rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: $uni-bg-color-main-linear;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #000;
		text-align: center;
	}
	
	.compose-container.animate .compose-result-bg {
		display: block;
		-webkit-animation: composeResult .5s ease-out .3s both;
		-moz-animation: composeResult .5s ease-out .3s both;
		animation: composeResult .5s ease-out .3s both;
	}
	
	.compose-container.animate .compose-result-content {
		display: block;
		-webkit-animation: composeResult .8s ease-out 1s both;
		-moz-animation: composeResult .8s ease-out 1s both;
		animation: composeResult .8s ease-out 1s both;
	}
	
	.compose-container.animate .compose-result {
		display: flex;
	}
	
	
</style>

